<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="hello">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>图片点击切换</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}

	#container{
		width: 500px;
		height: 400px;
		margin: 50px auto;
	}

	#container .header{
		height: 40px;
		line-height: 40px;
	}
	
	#container .header ul li{
		display: inline-block;
		padding: 0 5px;	
		border:1px solid #ccc;
		cursor:pointer;
	}

	#container .header ul li:hover{
		background-color: #ccc7da;
		color: #fff;
	}

	#container .header ul li.active{
		background-color: #8d7fb9;
		color: #fff;
	}


	#container .body{
		position: relative;
		width: 500px;
		height: 300px;
	}


	#container .body .btn{
		position: absolute;
		display: inline-block;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		top: calc(50% - 18px);
		color: #fff;
		background-color: black;
		opacity: .4;	
		cursor:pointer;
	}

	#container .body .picHeader,.picfooter{
		position: absolute;
		height:30px;
		width: 100%;
		line-height: 30px;
		text-align: center;
		background-color: black;
		color: #fff;
		opacity: .4;
	}

	.picHeader{
		top:0;
	}

	.picfooter{
		bottom:0;
	}

	#container .body .prev{
		left: 0;
	}

	#container .body .next{
		right: 0;
	}

	#container .body img{
		display: block;
		float: left;

	}
  </style>
 </head>
 <body>
	<div id="container">
		<div class="header">
			<ul>
				<li class="nav recycle active">循环切换</li>
				<li class="nav single">单边切换</li>
			</ul>
		</div>
		<div class="body">
			<div class="pics">			
				<img src="images/01.jpg" alt="" width="500" height="300" >
				<img src="images/02.jpg" alt="" width="500" height="300" style="display:none">
				<img src="images/03.jpg" alt="" width="500" height="300" style="display:none">
				<img src="images/04.jpg" alt="" width="500" height="300" style="display:none">
				<img src="images/05.jpg" alt="" width="500" height="300" style="display:none">
				<img src="images/06.jpg" alt="" width="500" height="300" style="display:none">
				<img src="images/07.jpg" alt="" width="500" height="300" style="display:none">
				<img src="images/08.jpg" alt="" width="500" height="300" style="display:none">
			</div>
			<div class="picHeader">1 / 8</div>
			<div class="btn prev">前一张</div>	
			<div class="btn next">后一张</div>
			<div class="picfooter">第 1 张图片</div>
		</div>
	</div>

	<script>
		var prevBtn = document.querySelector(".btn.prev"),
			nextBtn = document.querySelector(".btn.next"),
			picHeader = document.querySelector(".picHeader"),
			picfooter = document.querySelector(".picfooter"),
			tgRecycle = document.querySelector(".nav.recycle"),
			tgSingle = document.querySelector(".nav.single"),
			imgs = document.querySelectorAll(".pics img");
		
		

		var recycle = true,		//默认循环
			curIndex = 0,
			len = imgs.length;

		prevBtn.onclick = function(){
			var prevIndex = curIndex -1;
			if(prevIndex == -1){
				if(recycle){
					prevIndex = len - 1;
				}else{
					alert("已经是第一长了");
					return;
				}
			}
			imgs[curIndex].style.display = "none";
			imgs[prevIndex].style.display = "block";
			curIndex = prevIndex;
			picHeader.innerHTML = (curIndex +1) + " / 8";
			picfooter.innerHTML = "第 "+(curIndex +1)+" 张图片";
		};
		nextBtn.onclick = function(){
			var nextIndex = curIndex +1;
			if(nextIndex == len ){
				if(recycle){
					nextIndex = 0;
				}else{
					alert("已经是最后一张了");
					return;
				}
			}
			imgs[curIndex].style.display = "none";
			imgs[nextIndex].style.display = "block";
			curIndex = nextIndex;
			picHeader.innerHTML = (curIndex +1) + " / 8";
			picfooter.innerHTML = "第 "+(curIndex +1)+" 张图片";
		};

		tgRecycle.onclick = function(){
			//1.样式	
			if(this.className.indexOf("active") == -1)this.className += " active";
			tgSingle.className = tgSingle.className.replace("active","");
			//2、标志
			recycle = true;
		}
		tgSingle.onclick = function(){
			if(this.className.indexOf("active") == -1)this.className += " active";
			tgRecycle.className = tgRecycle.className.replace("active","");
			recycle = false;
		}
	</script>
 </body>
</html>
